<template>
  <div id='tmpl'>
      <div id="subnav">
          <ul>
              <li @click="getimgid(0)">全部</li>
              <li v-for="(item,index) in snav" :key="index" @click="getimgid(item.id)">{{item.title}}</li>
          </ul>
      </div>
      <div id="imgslist">
        <ul>
            <li v-for="(item,index) in list" :key="index">
                <router-link v-bind="{to:'/phone/phoneinfo/' + item.id }">
                        <img v-lazy="item.img_url">
                        <div id="textlist">
                            <h4>{{item.title}}</h4>
                            <p>{{item.zhaiyao}}</p>
                        </div>
                </router-link>
            </li>
        </ul>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
        snav:[],
        list:[],
        id:""
    }
  },
  created(){
    this.$route.params.id;
    this.getcate();
    this.getimglist();
  },
  methods:{
    getimgid(id){
         this.id = id
        this.getimglist(id);
    },
    getcate(){
        var url = this.$commons.apidomain + "/api/getimgcategory"
        this.$http.get(url).then(function(res){
            var data = res.body
            if(data.status != 0){
                this.$commons.Toast(data.message);
                return
            }
            this.snav = data.message
        })
    },
    getimglist(id){
        var id = this.id || 0;
        var url = this.$commons.apidomain + "/api/getimages/"+id;
        this.$http.get(url).then(function(res){
            var data = res.body;
             if(data.status != 0){
                this.$commons.Toast(data.message);
                return
            }
            this.list = data.message;
        })
    }
  }
}
</script>
<style lang="css" scoped>
    #subnav{
        max-width:375px;
        width: 375px;
        overflow-x:auto 
    }
    #subnav ul{
        width: 1000px;
        list-style: none;
        padding-left:10px 
    }
    #subnav li{
        padding: 0 5px;
        float: left;
        color:#0094ff;
        cursor: pointer;
    }
    #imgslist ul{
        padding: 0;
        margin: 0;
    }
    #imgslist ul li{
        list-style: none;
        position: relative
    }
    #imgslist img{
        width: 100%;
        height: 300px;
    }
    #textlist{
        width: 100%;
        position: absolute;
        background-color: rgba(0,0,0,0.4);
        left: 0;
        bottom: 4px;
    }
    #textlist h4,#textlist p{
        color:#fff;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
        -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        -webkit-line-clamp: 2; /** 显示的行数 **/
        overflow: hidden;  /** 隐藏超出的内容 **/
    }
    image[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
    }
</style>